<div class="layuimini-container layuimini-page-anim">
    <div class="layuimini-main">
        <div>
            <form id="search-form"
                  class="layui-form layui-form-pane"
                  lay-filter="search-form">
                <div class="layui-form-item">
                    <div class="layui-inline">
                        <div class="layui-input-inline">
                            <input type="text" name="keyword"
                                   placeholder="名称、车牌、拼音"
                                   autocomplete="off" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-inline">
                        <div class="layui-input-inline">
                            <select name="parentId">
                            </select>
                        </div>
                    </div>
                    <div class="layui-inline">
                        <button type="button"
                                id="reset-btn"
                                class="layui-btn layui-btn-warm">
                            <i class="layui-icon layui-icon-refresh"></i> 重 置 </button>
                        <button type="submit"
                                id="search-btn"
                                class="layui-btn layui-btn-normal"
                                lay-submit lay-filter="search-btn">
                            <i class="layui-icon layui-icon-search"></i> 搜 索 </button>
                    </div>
                </div>
            </form>
        </div>

        <table class="layui-hide" id="data-table" lay-filter="data-table"></table>

        <script type="text/html" id="data-toolbar">
            <div class="layui-btn-container">
                <button class="layui-btn layui-btn-normal layui-btn-sm data-add-btn"
                        lay-event="add" id="add-btn"> 添加 </button>
                <button class="layui-btn layui-btn-sm layui-btn-danger data-delete-btn layui-btn-disabled"
                        lay-event="remove" id="remove-btn"> 删除 </button>
            </div>
        </script>

        <script type="text/html" id="data-tool">
            <a class="layui-btn layui-btn-normal layui-btn-xs"
               lay-event="edit">编辑</a>
            <a class="layui-btn layui-btn-xs layui-btn-danger"
               lay-event="remove">删除</a>
        </script>
    </div>
</div>

<script>
    class CityPage extends ListPage {
        constructor() {
            super({
                title: '城市',
                uri: 'plateRegions/cities',
                cols: [[
                    {type: 'checkbox', align: 'center'},
                    {field: 'name', title: '名称', align: 'center'},
                    {field: 'plate', title: '车牌', align: 'center'},
                    {title: '操作', minWidth: 150, toolbar: '#data-tool', align: "center"}
                ]],
                saveUri: 'plateRegions/save',
                removeUri: 'plateRegions/remove',
                savePageUri: 'page/metadata/city/save.html'
            })
        }

        _initSearchForm() {
            super._initSearchForm()

            this._loadProvinces(this._searchForm)
        }

        _initSaveForm() {
            super._initSaveForm()

            this._loadProvinces(this._saveForm)
        }

        _loadProvinces(form) {
            if (this._provinces) {
                this._initProvinces(form)
                return
            }
            Ajaxs.get({
                uri: 'plateRegions/provinces/list',
                success: (response) => {
                    this._provinces = response.data
                    this._initProvinces(form)
                }
            })
        }

        /**
         * 初始化下拉列表
         */
        _initProvinces(form) {
            // 初始化下拉控件
            const select = new Select({
                name: 'parentId',
                form
            })

            // 处理数据
            let data = this._provinces
            if (form === this._searchForm) { // 列表页面
                data = Commons.deepCopy(data)
                data.unshift({
                    name: '所有省份'
                })
            }

            // 设置数据
            select.data(data, (o) => {

                return {
                    val: o.data.id,
                    text: o.data.plate
                        ? `【${o.data.plate}】${o.data.name}`
                        : o.data.name
                }
            })

            // 编辑
            if (this._editData) {
                select.val(this._editData.parentId)
            }
        }
    }

    new CityPage()
</script>